<template>
  <div class="app-container">
    <el-table v-loading="loading"  :data="list" border fit highlight-current-row>
      <el-table-column align="center" label="ID" width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="审批流程" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Code" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.types }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="状态" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.status==1?'启用':'禁用' }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="Description">
        <template slot-scope="scope" >
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>

    <el-table-column>
      <template slot-scope="scope" >
        <el-button class="filter-item" size="mini" type="primary" @click="showAlert(scope.row.id)">设置审批步骤
<!--          <router-link :to="{name:'examineStep',params:{id:scope.row.id}}">设置审批步骤</router-link>-->
        </el-button>
      </template>
    </el-table-column>
    </el-table>

  <el-dialog title="设置审核流程" :visible.sync="dialogFormVisible">


    <el-form :model="form">
      <div v-for="(item,index) in descs" :key="index">
        <el-form-item :label="'第'+item.index+'级'">
          <el-col :span="5">
            <el-select v-model="descs[index].status" @change="showBut(index)" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1" style="text-align: center" v-show="item.show" >-</el-col>
          <el-col :span="8">
            <el-select style="width: 100%;" v-model="descs[index].user_id" v-show="item.show"  filterable multiple placeholder="+ 添加员工">
              <el-option
                v-for="item in users"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col>
          <el-col :span="1">&nbsp</el-col>
          <el-col  :span="2">    <el-button type="danger" icon="el-icon-delete" size="mini" circle @click="Delete(index)" ></el-button></el-col>
        </el-form-item>
      </div>
      <el-link @click="addStep">+ 添加审批层级</el-link>
<!--      <div>-->
<!--        *当选择“负责人主管”审批时。系统仅会通知负责人主管，但负责人所有上级（主管、主管的主管）均可审批。<br>-->
<!--        *当选择多个“指定用户”审批时。如果指定用户没有权限查看对应的合同，系统不会通知其审批。<br>-->
<!--        *当选择“指定用户（任意一人）”表示指定用户中任意一人审批即可。当选择“指定用户（多人会签）”表示 指定用户中所有人都要审批。<br>-->
<!--      </div>-->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="submitStep">确 定</el-button>
    </div>
  </el-dialog>
  </div>


</template>

<script>
    import Resource from '@/api/examine';
    const examineResource = new Resource('examine');
    export default {
        name: "List",
        data() {
            return {
                list: [],
                loading: true,
                dialogFormVisible: false,
                users:[],
                form: {
                    name: '',
                    region: '',
                    date1: '',
                    date2: '',
                    delivery: false,
                    type: [],
                    resource: '',
                    desc: ''
                },
                options: [{
                    value: 1,
                    label: '负责人主管',

                }, {
                    value: 2,
                    label: '指定用户（任意一人）',
                }],
                examineId:"",
                descs:[],
            };
        },
        created(){
            this.init(),
          this.getList(),
          this.getUser()
        },
        methods:{
            init(){
                this.descs.push({
                    index:this.descs.length+1,
                    status: 1,
                    user_id: [],
                    show:false,
                });
            },
            async getList(){
                this.loading = true;
                const { data } = await examineResource.list({});
                this.list=data;
                this.loading = false;

            },
            async getUser(){
                const { data } = await examineResource.getUsers({});
                this.users=data;
            },
            addStep(){
                this.init();
            },
            Delete (index) {
                console.log(this.descs.length);
                if(this.descs.length <2){
                    this.$message({
                        message: '至少保留一级审核',
                        type: 'error',
                        duration: 5 * 1000,
                    });
                    return true;
                }
                this.descs.splice(index, 1)
                for (let i in this.descs){
                    this.descs[i].index=parseInt(i)+1;
                }
                console.log(this.descs);
            },
            showBut(index){
                if(this.descs[index].status=='2'){
                    this.descs[index].show=true;
                }else
                {
                    this.descs[index].show=false;
                }
            },
            async showAlert(id){
                const {data} = await examineResource.getStepByFolwId(id);
                if(data.length > 0){
                    this.descs=data;
                }else{
                    this.init();
                }
                this.examineId=id;
                this.dialogFormVisible = true
                console.log(this.descs);

            },
            submitStep(){
                examineResource.setStep({flow_id:this.examineId,step:this.descs})
                    .then(response=>{
                        this.$message({
                            message: '审核步骤设置成功',
                            type: 'success',
                            duration: 5 * 1000,
                        });
                        this.descs=[{
                            index: 1,
                            status: 1,
                            user_id: [],
                            show:false,
                        }];
                        this.dialogFormVisible = false;
                    }).catch(error => {
                    console.log(error);
                });
            }
        }
    }
</script>

<style scoped>

</style>
